import React, { useCallback, useEffect, useState, useMemo } from 'react';
import MainTitle from '../../components/MainTitle'
import * as echarts from 'echarts';
import request from '@/utils/request'
import { connect } from 'react-redux';
import Records from './Records'
import { withStudent } from "@/utils/hoc"
function Back(props) {

    //获取折线图数据
    const getEchartsData = useCallback(async () => {
        const { data } = await request.get('/record/getLineChartData', {
            params: {
                type: 'back',
                roomId: props.userInfo.roomId,

            }
        })
        return {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: data.data.charData.columns,
                source: data.data.charData.rows
            },
            xAxis: { type: 'category' },
            yAxis: { type: 'value' },

            series: data.data.charData.columns.slice(1).map(item => {
                return (
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    }
                )
            })
        }
    }, [])

    useEffect(async () => {
        var chartDom = document.getElementById('eChart');
        var myChart = echarts.init(chartDom);
        var option = await getEchartsData('getup');
        option && myChart.setOption(option);
        window.addEventListener("resize", function () { myChart.resize(); });
    }, [])


    return (
        <div className="record">
            <MainTitle>个人记录</MainTitle>
            <Records {...props} type="back"></Records>
            <MainTitle>折线图表</MainTitle>
            <div style={{ backgroundColor: '#fff', margin: '40px 0', padding: 20, height: '400px', width: '100%' }} >
                <div id='eChart' style={{ height: '100%', width: '100%', }}>
                </div>
            </div>
        </div>
    )
}
Back = withStudent(Back)
export default connect(state => ({ userInfo: state.userInfo }))(Back)